<template>
	<view class="content">

		<view class="title">
			{{subTitle}}
		</view>
		<hackout-draw-lock class="gesture">

		</hackout-draw-lock>
		
		<view class="forgetGesture" @click="forgetGesture" v-if="showForgetGesture">
			{{$t('setGesturePassWrod.forgetGesturePwd')}}
		</view>
	</view>
</template>

<script setup>
	import {
		onShow,
		onLoad,
		onUnload
	} from "@dcloudio/uni-app";
	import {ref} from "vue";
	import {
		openGesturePwd,
		getGesturePwd,
		saveGesturePwd,
		logoutClearStorage,
	} from "../../utils/user_tools";
	import { apiUserLogoutAccount } from "../../api/user_api";
	import {i18nTool} from '../../utils/i18en';
	var count = ref(0);
	var gesturePwd1;
	var gesturePwd2;

	var status = ref(null)
	var subTitle = ref(null)
	var navTitle = ref(null)
	var verifySucess = ref(false)
	var showForgetGesture = ref(null);
	onShow(() => {

	})

	onLoad((e) => {
		let {data} = e;
		status.value = data;
		// 3 修改手势密码
		if (status.value == 1) { //关闭手势密码
			navTitle.value = i18nTool('setGesturePassWrod.inputGesturePwd1');
			subTitle.value = i18nTool('setGesturePassWrod.inputGesturePwd1');
			count.value = 5;
			showForgetGesture.value = true;
		} else if (status.value == 2) {
			navTitle.value =  i18nTool('setGesturePassWrod.setGesturePwd');
			subTitle.value =  i18nTool('setGesturePassWrod.inputGesturePwd1');
			showForgetGesture.value = false;
		} else if (status.value == 3) {
			navTitle.value =  i18nTool('setGesturePassWrod.modifyGesturePwd');
			subTitle.value = i18nTool('setGesturePassWrod.inputOldGesture');
			count.value = 5;
			showForgetGesture.value = true;
		}
		
		uni.setNavigationBarTitle({
			title: navTitle.value
		})

		uni.$on("change", function(data) {
			
			//关闭手势密码
			if (status.value == 1) {
				if (getGesturePwd() == JSON.stringify(data)) {
					openGesturePwd(false);
					uni.navigateBack(() => {

					})
				}else{
					if(count.value == 1){
						uni.showModal({
							confirmText: i18nTool('setGesturePassWrod.retryLogin'),
							title: i18nTool('setGesturePassWrod.invalidGesturePwd'),
							showCancel:false,
							success(res) {
								if (res.confirm) {
									logoutRequest();
								} else {
						
								}
							}
						})
					}else{
						count.value --;
						subTitle.value = i18nTool('setGesturePassWrod.errGesturePwd') + count.value + '次';
					}
					
				}
			} else if(status.value == 2){
				if(data.lenght < 4){
					uni.showToast({
						title:i18nTool('setGesturePassWrod.leastFourDot') ,
						icon:"none",
					})
					return;
				}
				if (count.value == 0) {
					gesturePwd1 = data;
					count.value ++;
					subTitle.value = i18nTool('setGesturePassWrod.inputAgain') ;
				} else {

					if (JSON.stringify(gesturePwd1) == JSON.stringify(data)) {
						saveGesturePwd(data);
						openGesturePwd(true);
						uni.navigateBack();
					} else {
						count.value = 0;
						subTitle.value = i18nTool('setGesturePassWrod.inputNewGesture') ;
						uni.showToast({
							title:i18nTool('setGesturePassWrod.notSame') ,
							icon: 'none'
						})
					}

				}
			}else if(status.value == 3){
				if(verifySucess.value){
					if(data.lenght < 4){
						uni.showToast({
							title:i18nTool('setGesturePassWrod.leastFourDot'),
							icon:"none",
						})
						return;
					}
					count.value++;
					if(count.value ==2){
						if(JSON.stringify(gesturePwd1) == JSON.stringify(data)){
							saveGesturePwd(data);
							uni.showToast({
								title:i18nTool('setGesturePassWrod.setSuccess'),
								icon:"none"
							})
							uni.navigateBack();
						}else{
							count.value = 0;
							uni.showToast({
								title:i18nTool('setGesturePassWrod.notSame'),
								icon:'none'
							})
							subTitle.value = i18nTool('setGesturePassWrod.inputNewGesture');
						}
						
					}else{
						gesturePwd1 = data
						subTitle.value = i18nTool('setGesturePassWrod.inputAgain');
					}
				}else{
					if(getGesturePwd() == JSON.stringify(data)){
						verifySucess.value = true;
						subTitle.value = i18nTool('setGesturePassWrod.inputAgain');
						count.value = 0
					}else{
						if(count.value == 1){
							uni.showModal({
								confirmText: i18nTool('setGesturePassWrod.retryLogin'),
								title: i18nTool('setGesturePassWrod.invalidGesturePwd'),
								showCancel:false,
								success(res) {
									if (res.confirm) {
										logoutRequest();
									} else {
							
									}
								}
							})
						}else{
							count.value --;
							subTitle.value = i18nTool('setGesturePassWrod.errGesturePwd') + count.value + '次';
						}
						
					}
				}
				
			}

		})
	})
	
	function forgetGesture(){
		uni.showModal({
			confirmText: i18nTool('setGesturePassWrod.retryLogin'),
			title: i18nTool('setGesturePassWrod.retrySetGesture'),
			success(res) {
				if (res.confirm) {
					logoutRequest();
				} else {
		
				}
			}
		})
	}
	
	async function logoutRequest() {
		uni.showLoading({
			title:'Loading...'
		})
		let res = await apiUserLogoutAccount();
		logoutClearStorage();
		uni.reLaunch({
			url: "/pages/login/login"
		})
	
	}
	onUnload(() => {
		
		uni.$off("change");
	})



	function toLogin() {
		logoutClearStorage();
		uni.reLaunch({
			url: "/pages/login/login"
		})

	}
</script>

<style lang="scss" scoped>
	.content {
		display:flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		.title {
			margin-top: 100rpx;
			color: #333;
			font-size: 32rpx;
			text-align: center;
		}

		.gesture {
			margin-top: 50rpx;
			text-align: center;

		}
		.forgetGesture{
			color: #333;
			font-size: 32rpx;
			text-align: center;
			margin-bottom: 50rpx;
		}

	}
</style>